<style lang="scss">
.test-popover-content {
  .my-content {
    height: 300px;
    --scrollbar-width: 10px;
    --scrollbar-track-fill-color: rgba(0, 0, 0, 0.1);
    --scrollbar-track-fill-color-hover: rgba(0, 0, 0, 0.16);
    --scrollbar-track-border-radius: 15px;
    --scrollbar-thumb-fill-color: #3b97ff;
    --scrollbar-thumb-fill-color-hover: #0366d6;
    --scrollbar-thumb-fill-color-active: #000;
  }
  .my-item {
    padding: 10px;
  }
}
</style>

<template>
  <div class="test-popover-content">
    <scrollable-component :id="eleId" class="my-content">
      <!-- Your content -->
      start
      <div
          @click="selectOptionItem(item)"
          class="my-item" v-for="item in items">
        item {{item}}
      </div>
      <el-button @click="toTop">top</el-button>
    </scrollable-component>
  </div>
</template>

<script>
export default {
  name: 'TestPopoverContent',
  data() {
    return {
      eleId: ZY.rid(),
      items: Array(10).fill().map((v, index) => {
        return index + ''
      }),
      scrollEle: null
    }
  },
  mounted() {
    this.scrollEle = document.getElementById(this.eleId);
  },
  methods: {
    toTop() {
      // console.dir(this.scrollEle.viewport.scrollTop)
      // this.scrollEle.viewport.scrollTop = 0
      this.scrollEle.viewport.scroll({
        top: 0,
        behavior: 'smooth'
      });
    },
    selectOptionItem(item) {
      this.$emit('confirm', item)
    }
  }
}
</script>
